const getServerSideProps = async (context) => {
  const res = await fetch('http://localhost:3000/api' + context.resolvedUrl);
  const data = await res.json();

  return { props: { data } };
}

const BreadCrumbTrail = (props) => {
  const pathArray = props.pathArray;
  
  const recursion = (acc) => {
    if (acc.length === pathArray.length) {
      return acc;
    } else {
      const subArray = pathArray.slice(0, acc.length + 1);

      const breadCrumb = {
        name: pathArray[acc.length],
        href: '/' + subArray.join('/'),
      };

      const newAcc = acc.concat([breadCrumb]);
      return recursion(newAcc);
    }
  }

  const breadCrumbs = recursion([]);

  return (
    <div>
      {breadCrumbs.map((breadCrumb) => (
        <el>/ <a href={breadCrumb.href}>{breadCrumb.name}</a> </el>
      ))}
    </div>
  )
}

const PageSubstance = (props) => {
  const data = props.data

  switch (data.resultType) {
    case 'treeContents':
      const treeContents = data.resultContent.trees.concat(data.resultContent.blobs);
    
      return (
        <div>
          <BreadCrumbTrail pathArray={data.resultPath} />
          <h1>Items:</h1>
          <ul>
            {treeContents.map((item) => (
              <li><a href={'/' + data.resultPath.join('/') + '/' + item}>{item}</a></li>
            ))}
          </ul>
        </div>
      );
      
      break;
    case 'textBlob':
      return (
        <div>
          <BreadCrumbTrail pathArray={data.resultPath} />
          <h1>Text:</h1>
          {data.resultContent}
        </div>
      );

      break;
    case 'binaryBlob':
        return (
          <div>
            <BreadCrumbTrail pathArray={data.resultPath} />
            <p>Binary content cannot be displayed.</p>
          </div>
        );
  
        break;
    case 'error':
      return (
        <div>
          <h1>Error:</h1>
          {data.resultContent}
        </div>
      );

      break;
  }
}

const Main = ({ data }) => {
  return (
    <div>
      <PageSubstance data={data} />
    </div>
  );
}

export { getServerSideProps };
export default Main;